{% extends 'base.html' %}


{% block content %}
    <form action="" method="post" class="form-group" enctype="multipart/form-data">
    {% csrf_token %}
       <div class="form-group">
                    <label for="myfile">头像
                        <img src="/media/{{ request.user.avatar }}" alt="" width="80" style="margin-left: 10px" id="myimg">
                    </label>
                    <input type="file" id="myfile" name="avatar" style="display: none">
                </div>
        <input type="submit" class="btn btn-success">
    </form>



{% endblock %}


{% block js %}
    <script>
    $('#myfile').change(function () {
        // 文件阅读器
        //1 产生一个文件阅读器对象
        var fileReader = new FileReader();
        //2 获取用户上传的文件
        var fileObj = $(this)[0].files[0];
        //3 让文件阅读器读取该文件
        fileReader.readAsDataURL(fileObj);  // 这一步是异步 提交完之后直接运行下一行
        //4 利用文件阅读器将文件展示出来
        fileReader.onload = function () {
            $('#myimg').attr('src', fileReader.result)
        }
    });
    </script>
{% endblock %}